<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />

<div class="demoTableThird" style="padding-left: 10px;padding-top:10px">
        搜索关键字：
    <div class="layui-inline">
        <input class="layui-input" name="keyword3" id="demoReload3" autocomplete="off" value="">
    </div>
    <button id="btn-reload-3"class="layui-btn" data-type="reload">搜索</button>
</div>
<table id="log-table" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:src="@{/layui/layui.js}"></script>
<script>

    layui.use(['table','layer'], function() {
        let $ = layui.$;
        let layer = layui.layer;
        $(function(){
            //let token = layui.data("tokens").token;
            //ct();
            let table = layui.table;
            let documentWith = $(document).width();
            let documentHeight = $(document).height();
            console.log(documentWith);
            console.log(documentHeight);
            //第一个实例
            table.render({
                elem: '#log-table'
                ,method:"POST"
                ,url: '/image/tags/list' //数据接口
                ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit','limits', 'count', 'prev','page','next', 'first','last','skip'] //自定义分页布局
                    ,limit:10
                    ,limits:[1,5,10,15]
                    ,groups: 5 //只显示 5 个连续页码
                }
                ,request:{
                    pageName:"pageCurrent",
                    limitName:"pageSize"
                }
                ,contentType:"application/json;charset=UTF-8"
                ,response: {
                    statusCode: 10000 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                /*,headers: {token:token}*/
                ,toolbar: "defa"
                // ,defaultToolbar: ['filter', 'print', 'exports', {
                //     title: '提示' //标题
                //     ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                //     ,icon: 'layui-icon-tips' //图标类名
                // }]
                ,cols: [
                    [
                        {field: 'name', title: "名称", sort: true, fixed: 'left',width: "45%"}
                        ,{field: 'tags', title: '版本',  sort: true,width: "45%"}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:"10%"}
                    ]
                ]
                /*,data:[
                    {
                        "id":"10001"
                        ,"name": "杜甫"
                        ,"operatorName": "test@email.com"
                        ,"createTime": "男"
                        ,"operateAccount": "浙江杭州"
                        ,"operatorRole": "人生恰似一场修行"
                        ,"result": "116"
                    }
                ]*/
                ,parseData:function(data){
                    console.info(data.data);
                    return {
                        "code": data.code, //解析接口状态
                        "msg": data.msg, //解析提示文本
                        "count":data.data.total, //解析数据长度
                        "data": data.data.list //解析数据列表
                    };
                }
                ,id: 'reload1'
            });

            //搜索表格重载
            let active = {
                reload: function(){
                    let demoReload = $('#demoReload3');

                    console.log(demoReload.val());
                    //执行重载
                    table.reload('reload1', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            name: demoReload.val()
                        }
                    }, 'data');
                }
            };
            $('#btn-reload-3').on('click', function(){
                let type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });



            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                console.log(obj);
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                let data = obj.data;
                console.log(obj)
                if(obj.event === 'detail'){
                    layer.open({
                        type: 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,
                        title: '查看详情',   //标题
                        area: ['650px', '600px'],   //宽高
                        shade: 0.4,   //遮罩透明度
                        content:"/index/image/tag/detail",//支持获取DOM元素
                        btn: ['确定', '取消'], //按钮组
                        scrollbar: false ,//屏蔽浏览器滚动条
                        success:function(layero,index){
                            console.log(data);
                            let tag = obj.data.tags[0];
                            // 获取子页面的iframe
                            let iframe = window['layui-layer-iframe' + index];
                            // 向子页面的全局函数child传参
                            iframe.init(obj.data.name,tag);
                        },
                        yes: function(index){//layer.msg('yes');    //点击确定回调
                            layer.msg('bbb');
                            layer.closeAll();
                        }, btn2: function(){//layer.alert('aaa',{title:'msg title'});  ////点击取消回调
                            //layer.msg('bbb');//layer.closeAll();
                            layer.msg('bbb');
                            layer.closeAll();
                        }
                    });
                } else if(obj.event === 'del'){
                    layer.msg("don't allow delete");
                } else if(obj.event === 'edit'){
                    layer.msg("don't allow edit");
                }

            });



        });
    });
</script>
